<template>
    <div class="header-wrap relative">
            <div class="h-wrap z-container"> 
                <div class="h-inner z-wrap">
                    <div class="h-box z-inner">
                        <div class="h-content z-content">
                            <z-drawer></z-drawer>
                            <div class="header-left">
                                <div class="h-logo" style="align-item-center">
                                    <div class="ver-middle" style="">
                                        <a href="/" class="">
                                            <img src="@assets/logo/logo.png"  alt="" style="width:7.375rem;height:33px;">
                                        </a>
                                    </div>
                                </div>
                                <div class="h-manu flex ">
                                    <div class="h-manu-inner table" v-for="(item,index) in manu" :key="index">
                                            <div class="center-table cursor-pointer" @click="manu_active=index" :class="{'h-manu-active':manu_active===index}">
                                                <router-link :to="{name:item,query:index}" style="color:inherit">
                                                    {{item}}
                                                </router-link>
                                            </div>
                                    </div>
                                </div>
                            </div>
                            <div class="header-right h-user-wrap table">
                                <div class="center-table">
                                    <div class="h-user-inner flex">
                                        <div class="flex-ai-center" style="width:100%;">
                                            <div class="h-user-img ">
                                                <a href="/">
                                                    <img src="../../../assets/img/头像.jpeg" alt="">
                                                </a>
                                            </div>
                                            <div class="h-user-info cursor-pointer">
                                                <span>登陆</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="h-user-manu cursor-pointer">
                                    <div class="manu"><span class="iconfont icon-chuangzuo"></span> 修改信息</div>
                                    <div class="manu"><span class="iconfont icon-getout"></span> 退出登陆</div>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
    </div>
</template>

<script lang='ts'>
import { ref,reactive,toRefs,defineComponent,onMounted,getCurrentInstance} from 'vue'
export default defineComponent({
    name:'',
    setup: ()=>{
        let data = reactive({
            manu:['首页','作业系统','考试系统','使用手册'],
            manu_active:0,
        })
        const { proxy } = getCurrentInstance() as any;
        onMounted(() => {
            console.log(proxy.$route);
            data.manu.forEach((item,index)=>{//刷新校验
                if(item === proxy.$route.name){
                    data.manu_active = index
                }
            })
            
        })
        return {
           ...toRefs(data),
        }
    }
})
</script>
<style lang="scss" scoped>
@import '@theme/mixins/mixins.scss';
.h-wrap{
    .h-box{
        .h-content{
            position: absolute;
            height: 100%;
            display: flex;
            justify-content: space-between;
            .header-left{
                width: 100%;
                display: flex;
                .h-logo{
                    width: 8.25rem;
                    margin-right: 50px;
                    display: flex;
                    align-items: center;
                }
                .h-manu{
                    width: 60rem;
                    justify-content: start;
                    font-size: large;
                    font-weight: 400;
                    .h-manu-inner{
                        height: 100%;
                        align-items: center;
                        margin-right: 4.25rem;
                        transition: all 1s;
                        &:hover{
                            color: #5473e7;
                            transition: all 0.5s;
                        }
                    }
                    .h-manu-active{
                        color: #5473e7;
                        border-bottom: 0.125rem solid currentColor;
                    }
                }
            }
            .h-user-wrap{
                display: flex;
                flex-shrink: 0;
                position: relative;
                font-weight: 300;
                &:hover{
                    .h-user-manu{
                        visibility: visible;
                        width: 7.5rem;
                        .manu{
                            display: inline-block;
                            color: black;
                        }
                    }
                }
                .h-user-inner{
                    height: 100%;
                    width: 7.5rem;
                    .h-user-img{
                        border-radius: 50%;
                        overflow: hidden;
                        margin: 0.625rem;
                        a{
                            img{
                                width: 3.125rem;
                                height: 3.125rem;
                            }
                        }
                    }
                }
                .h-user-manu{
                    position: absolute;
                    bottom: -55px;
                    left: 7px;
                    width: 0;
                    background: white;
                    border-radius: 2%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                    z-index:100;
                    //visibility: hidden;
                    transition: all 0.5s ease-in-out;
                    .manu{
                        display: none;
                        vertical-align: middle;
                        @include line-height(2.25rem,2.25rem);
                        text-align: center;
                        width: 7.5rem;
                        color: transparent;
                        &:nth-child(n+2){
                            border-top: 0.5px solid rgba($color: #000000, $alpha: 0.1);
                        }
                        &:hover{
                            background: rgba(31, 224, 238, 0.21);
                        }
                    }
                }
            }
            
        }
    }
    
}
</style>